<template>
  <div class="main">
    <p class="main_text">危固废管理</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchData">
        <div class="df fww">
          <el-form-item v-if="cmopany == 0" label="公司名称：" class="mr20" style="width: 20%">
            <el-select v-model="searchData.companyNode" filterable placeholder="公司名称">
              <el-option v-for="item in companyList" :key="item.id" :label="item.companyName" :value="item.node" />
            </el-select>
          </el-form-item>
          <el-form-item label="废料类型：" class="mr20" style="width: 20%">
            <el-select v-model="searchData.wasteType" placeholder="危固废类型：">
              <el-option v-for="val in HazardousWasteGetWasteType" :key="val.type_id" :label="val.type_name"
                :value="val.type_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库名称：" style="width: 20%">
            <el-select v-model="searchData.storeId" filterable placeholder="仓库名称：" class="mr20">
              <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                :value="item.warehouseId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <div class="mb20">
        <el-button type="primary" @click="InDialogVisible = true" v-if="roleList.write">入库</el-button>
        <el-button type="primary" plain @click="exportExcel" v-if="roleList.write">导出数据</el-button>
      </div>
      <div class="cyr-flex-box">
      <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%"
        :header-cell-style="{ background: '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column type="selection" width="50" />
        <el-table-column prop="id" label="废料编号" />
        <el-table-column prop="type_name" label="废料类型">
          <template #default="props">
            <el-text tag='span' style='cursor: pointer;' @click="details(props.row)">{{ props.row.type_name }}</el-text>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="storeId" label="仓库编号" /> -->
        <el-table-column prop="warehouseName" label="仓库名称" width="300" />
        <!-- <el-table-column prop="num" label="单位" /> -->
        <el-table-column prop="wasteNum" label="仓储数量" />
        <!-- <el-table-column prop="measure_unit" label="单位" /> -->
        <el-table-column prop="created" label="创建时间" />
        <el-table-column prop="updated" label="更新时间" />
        <el-table-column label="操作" fixed="right" width="140">
          <template #default="props">
            <el-button size="small" link type="primary" @click="details(props.row)" v-if="roleList.read">详情</el-button>
            <el-button size="small" link type="primary" @click="outBoundDialog(props.row)"
              v-if="roleList.write">出库</el-button>
            <el-button size="small" link type="primary" @click="transferDialog(props.row)"
              v-if="roleList.write">调拨</el-button>
            <!-- <el-button size="small" link type="primary">下载二维码</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
      </div>
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 编辑危固废-----详情 ****************************** -->
    <el-drawer v-model="drawer" size="50%" style="background: #f5f9ff" @close="drawerClose">
      <div class="drawer_top p20">
        <h1 style="font-weight: 700; font-size: 1.125rem; color: #3d3d3d">
          {{ editformData.type_name }}
        </h1>
        <span style="color: #9e9e9e; font-size: 0.75rem">危固废编号：{{ editformData.id }}</span>
        <el-divider style="margin: 0.625rem 0" />
        <el-form :model="editformData" label-width="120" label-position="left" class="df fww jcsb">
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">危固废编号：</p>
              </div>
            </template>
            <el-text>{{ editformData.id }}</el-text>
          </el-form-item>
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">废料类型：</p>
              </div>
            </template>
            <el-text>{{ editformData.type_name }}</el-text>
          </el-form-item>
          <!-- <el-form-item style="width: 46%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">单位：</p>
                            </div>
                        </template>
                        <el-text>{{ editformData.measure_unit }}</el-text>
                    </el-form-item> -->
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">仓库名称：</p>
              </div>
            </template>
            <el-text>{{ editformData.warehouseName }}</el-text>
          </el-form-item>
          <!-- <el-form-item style="width: 46%">
                        <template #label>
                            <div class="df aic">
                                <el-icon color="#9e9e9e" class="mr6">
                                    <User />
                                </el-icon>
                                <p style="color: #9e9e9e">仓库编码：</p>
                            </div>
                        </template>
                        <el-text>{{ editformData.storeId }}</el-text>
                    </el-form-item> -->
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">库存总量：</p>
              </div>
            </template>
            <el-text>{{ editformData.wasteNum }}</el-text>
          </el-form-item>
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">低储：</p>
              </div>
            </template>
            <el-input-number v-model="minStock" :step="1" step-strictly style="width: 80%" :disabled="flag" />
          </el-form-item>
          <el-form-item style="width: 46%">
            <template #label>
              <div class="df aic">
                <p style="color: #9e9e9e">高储：</p>
              </div>
            </template>
            <el-input-number v-model="maxStock" :step="1" step-strictly style="width: 80%" :disabled="flag" />
          </el-form-item>
        </el-form>
        <div class="df jcc">
          <div>
            <el-button type="primary" size="small" @click="editDetails">修改</el-button>
            <el-button type="primary" size="small" plain @click="saveDetails">保存</el-button>
          </div>
        </div>
      </div>
      <div class="drawer_top p20 mt20">
        <div class="df aic jcc">危固废统计明细</div>
        <!-- <div class="df jcsb">
                    <div class="mr10">
                        <el-select v-model="select" placeholder="明细类型" style="width: 7.1875rem">
                            <el-option label="Restaurant" value="1" />
                            <el-option label="Order No." value="2" />
                            <el-option label="Tel" value="3" />
                        </el-select>
                    </div>
                    <div style="width: 50%" class="df aic b0 mr10">
                        <el-select v-model="select" placeholder="明细类型" style="width: 30%">
                            <el-option label="Restaurant" value="1" />
                            <el-option label="Order No." value="2" />
                            <el-option label="Tel" value="3" />
                        </el-select>
                        <el-date-picker v-model="timeValue" type="datetimerange" range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" />
                    </div>
                    <div class="DocumentNumber">
                        <el-input v-model="input" placeholder="Please input" class="input-with-select">
                            <template #prepend>
                                <el-select v-model="select" placeholder="单据编号"
                                    style="width: 6.25rem; background-color: #fff">
                                    <el-option label="Restaurant" value="1" />
                                    <el-option label="Order No." value="2" />
                                    <el-option label="Tel" value="3" />
                                </el-select>
                            </template>
                            <template #append>
                                <el-button :icon="Search"></el-button>
                            </template>
                        </el-input>
                    </div>
                </div> -->
        <el-table :data="tableDataDetial" style="width: 100%" class="mt20"
          :header-cell-style="{ background: '#f5f7fa' }" border max-height="240">
          <el-table-column label="操作时间" prop="createdAt" />
          <el-table-column label="废料名称" prop="hazardousWasteName" />
          <el-table-column label="仓库名称" prop="warehouseName" />
          <el-table-column label="仓库位置" prop="adress" />
          <el-table-column label="库存数量" prop="num" />
          <!-- <el-table-column label="供应商" prop="supplierId" /> -->
          <!-- <el-table-column label="备注" prop="remark" /> -->
        </el-table>
      </div>
    </el-drawer>
    <!-- ****************************** 危固废入库 ****************************** -->
    <el-dialog v-model="InDialogVisible" width="30%" align-center @close="closeInDialogVisible">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">危固废入库</p>
        </div>
      </template>
      <el-form ref="ruleFormRef_wgf_out" :rules="rules_wgf_out" :model="outData" label-position="top"
        class="df fww jcsb">
        <el-form-item label="入库方式：" style="width: 48%" prop="status">
          <el-select v-model="outData.status" placeholder="危固废入库">
            <!-- <el-option label="调拨入库" value="1" /> -->
            <el-option label="手动录入" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="危固废类型:" style="width: 48%" prop="wasteTypeName">
          <el-select v-model="outData.wasteTypeName" filterable allow-create default-first-option>
            <el-option v-for="val in HazardousWasteGetWasteType" :key="val.type_id" :label="val.type_name"
              :value="val.type_name" />
          </el-select>
        </el-form-item>
        <el-form-item label="危固废名称：" style="width: 48%" prop="hazardousWasteName">
          <el-input v-model="outData.hazardousWasteName" placeholder="危固废名称" />
        </el-form-item>
        <el-form-item label="入库仓库：" style="width: 48%" prop="storeId">
          <el-select v-model="outData.storeId" placeholder="入库仓库" @change="changeSearch" filterable>
            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="存储位置：" style="width: 48%" prop="storageLocation">
          <el-cascader v-model="outData.storageLocation" placeholder="存储位置" :options="options" filterable
            @focus="changeArea" />
        </el-form-item>
        <el-form-item label="入库数量：" style="width: 48%" prop="num">
          <el-input v-model.number="outData.num" placeholder="入库数量" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="InDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="AddPutIn(ruleFormRef_wgf_out)" :loading="loading">
            入库
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 危固废出库 ****************************** -->
    <el-dialog v-model="StartcenterDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">危固废出库</p>
        </div>
      </template>
      <el-form :model="putInData" label-position="top" class="df fww jcsb">
        <el-form-item label="出库类型：" style="width: 48%">
          <el-select v-model="putInData.status" placeholder="出库类型">
            <el-option label="销售出库" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库仓库：" style="width: 48%">
          <el-select v-model="putInData.warehouseId" placeholder="出库仓库">
            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库材料：" style="width: 48%">
          <el-select v-model="putInData.productType" placeholder="出库材料">
            <el-option v-for="item in HazardousWasteGetWasteType" :key="item.type_id" :label="item.type_name"
              :value="item.type_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库数量：" style="width: 48%">
          <el-input v-model="putInData.num" placeholder="出库数量" />
        </el-form-item>
        <el-form-item label="转运联单：" style="width: 48%">
          <div class="upload">
            <el-icon class="add">
              <Plus />
            </el-icon>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" v-model:file-list="fileRaw"
              :on-change="changeFile">
              <el-icon>
                <Plus />
              </el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="StartcenterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Outbound"> 出库 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 危固废出库 ****************************** -->
    <el-dialog v-model="outBoundDialogVisible" width="40%" align-center @close="closeOutBoundDialogVisible">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">危固废出库</p>
        </div>
      </template>
      <el-form :model="outBoundData" ref="ruleFormRef_wgf_outBound" :rules="rules_wgf_outBound" label-position="top"
        class="df fww jcsb">
        <el-form-item label="出库仓库：" style="width: 48%">
          <el-input v-model="outBoundData.warehouseName" disabled />
        </el-form-item>
        <el-form-item label="出库材料：" style="width: 48%">
          <el-select v-model="outBoundData.productType" disabled>
            <el-option v-for="item in HazardousWasteGetWasteType" :key="item.type_id" :label="item.type_name"
              :value="item.type_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量：" style="width: 48%">
          <el-input v-model="outBoundData.wasteNum" disabled />
        </el-form-item>
        <el-form-item label="出库数量：" style="width: 48%" prop="num">
          <el-input v-model.number="outBoundData.num" placeholder="出库数量" />
        </el-form-item>
        <el-form-item label="转运联单：" style="width: 48%">
          <div class="upload">
            <el-icon class="add">
              <Plus />
            </el-icon>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" v-model:file-list="fileRaw"
              :on-change="changeFile">
              <el-icon>
                <Plus />
              </el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="outBoundDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="outBoundBtn(ruleFormRef_wgf_outBound)" :loading="loading">
            出库
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 危固废调拨 ****************************** -->
    <el-dialog v-model="DiaoBoDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">危固废调拨</p>
        </div>
      </template>
      <el-form :model="transferData" label-position="top" class="df fww jcsb">
        <el-form-item label="调出仓库：" style="width: 48%">
          <el-select v-model="transferData.outWarehouseId" placeholder="请选择调出仓库">
            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="调入仓库：" style="width: 48%">
          <el-select v-model="transferData.inWarehouseId" placeholder="请选择调入仓库" @change="changeTransfer">
            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="调入区域：" style="width: 48%">
          <el-cascader v-model="transferData.transferInArea" placeholder="存储位置" :options="optionsTransfer" filterable
            @focus="changeAreaFocus" />
        </el-form-item>
        <el-form-item label="调拨商品：" style="width: 48%">
          <el-select v-model="transferData.productType" placeholder="请选择调拨商品">
            <el-option v-for="item in HazardousWasteGetWasteType" :key="item.type_id" :label="item.type_name"
              :value="item.type_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="调拨数量：" style="width: 48%">
          <el-input v-model="transferData.num" placeholder="请选择调拨数量" />
        </el-form-item>
        <el-form-item label="转运联单：" style="width: 48%">
          <div class="upload">
            <el-icon class="add">
              <Plus />
            </el-icon>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" v-model:file-list="fileRaw"
              :on-change="changeFile">
              <el-icon>
                <Plus />
              </el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="DiaoBoDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="transfer"> 调拨 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 危固废调拨 ****************************** -->
    <el-dialog v-model="TransferDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">危固废调拨</p>
        </div>
      </template>
      <el-form :model="transferDialogData" label-position="top" class="df fww jcsb" :rules="rules_transferDialog"
        ref="ruleFormRef_transferDialog">
        <el-form-item label="调出仓库：" style="width: 48%">
          <el-input v-model="transferDialogData.warehouseName" placeholder="调出仓库：" disabled />
        </el-form-item>
        <el-form-item label="调出类型：" style="width: 48%">
          <el-select v-model="transferDialogData.productType" placeholder="调出类型：" disabled>
            <el-option v-for="item in HazardousWasteGetWasteType" :key="item.type_id" :label="item.type_name"
              :value="item.type_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量：" style="width: 48%">
          <el-input v-model="transferDialogData.wasteNum" placeholder="库存数量：" disabled />
        </el-form-item>
        <el-form-item label="调入仓库：" style="width: 48%" prop="inWarehouseId">
          <el-select v-model="transferDialogData.inWarehouseId" placeholder="请选择调入仓库" @change="changeTransfer1">
            <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="调入区域：" style="width: 48%" prop="transferInArea">
          <el-cascader v-model="transferDialogData.transferInArea" placeholder="存储位置" :options="optionsTransfer"
            filterable @focus="changeAreaFocus1" />
        </el-form-item>
        <el-form-item label="调拨数量：" style="width: 48%" prop="num">
          <el-input v-model.number="transferDialogData.num" placeholder="调拨数量" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="TransferDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="transferDialogBtn(ruleFormRef_transferDialog)" :loading="loading">
            调拨
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { formatTime, formatTimeHan } from '@/filters/index'
import { ElMessage } from 'element-plus'
import { exportFile } from '@/utils/exportFile.js'
import {
  RequestTransferSave,
  RequestHazardousWasteGetWasteType,
  RequestWasteStatisticGetlistlimit,
  RequestHazardousWasteSave,
  RequestHazardousWasteWasteOutbound,
  RequestWarehouseList,
  RequestInventoryWarnningGetWarningByStatisticId,
  RequestInventoryWarnningSave,
  RequestHazardousWasteGetWasteDetail,
  RequestUpWarehouseAreaGetAreaInfo,
  RequestEmployeeGetFunctionAuthorize,
  RequestCompanyList,
  RequestWasteStatisticOutputExcel,
} from '@/api/path/index.js'
import {
  User,
  Search,
  Delete,
  Download,
  Plus,
  ZoomIn,
  Edit,
  Loading,
} from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
/*------------------------------------- 按钮权限 -------------------------------------*/
import useAuthorize from "@/hooks/authorize";
let roleList = useAuthorize()
// import { useRouter } from 'vue-router'
// const authorizeFlag = ref<any>()
// const btnAuthority = () => {
//   // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//   RequestEmployeeGetFunctionAuthorize(
//     useRouter().currentRoute.value.meta.title
//   ).then((res: any) => {
//     // console.log(res.resultObj);
//     if (res.resultObj == 'W') {
//       authorizeFlag.value = false
//     } else {
//       authorizeFlag.value = true
//     }
//   })
// };
// btnAuthority()
const loading = ref<any>(false)
/* ********************************************************************** 获取公司列表 ***********************************************************************/
const cmopany = JSON.parse(localStorage.getItem('roleInfo')!).company
const companyList = ref<any>([])
const getCompanyList = () => {
  if (JSON.parse(localStorage.getItem('roleInfo')!).company == 0) {
    RequestCompanyList().then((res: any) => {
      // console.log(res.resultObj)
      companyList.value = res.resultObj
    })
  }
}
getCompanyList()
/*------------------------------------- 按钮权限 -------------------------------------*/
/* ************************ 查询 ************************ */
const searchData = ref<any>({
  storeId: '',
  wasteType: '',
  companyNode: '',
})
const search = () => {
  getData()
};
const resc = () => {
  (searchData.value.storeId = ''),
    (searchData.value.companyNode = ''),
    (searchData.value.wasteType = ''),
    currentPage.value = 1,
    getData()
};
const StartcenterDialogVisible = ref<any>(false) //出库
const InDialogVisible = ref<any>(false) //入库
const DiaoBoDialogVisible = ref<any>(false) //调拨
const tableData = ref<any>([])
/* 查看详情&修改 */
const editformData = ref<any>({})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
};
const drawer = ref(false) //详情
const flag = ref<any>(true)
/* ************************ 获取危固废类型 ************************ */
const HazardousWasteGetWasteType = ref<any>([])
const GetHazardousWasteGetWasteType = () => {
  RequestHazardousWasteGetWasteType().then((res: any) => {
    HazardousWasteGetWasteType.value = res.resultObj
    // console.log(HazardousWasteGetWasteType.value)
  })
};
/* ************************ 获取仓库下拉数据 ************************ */
const WarehouseList = ref<any>([])
const getWarehouseList = () => {
  RequestWarehouseList().then((res: any) => {
    // res.resultObj.forEach((item:any) => {
    //     console.log('sadasdadadasdas=====>',item);
    //     item.warehouseId=String(item.warehouseId)
    // });
    WarehouseList.value = res.resultObj
  })
};
getWarehouseList()
GetHazardousWasteGetWasteType()
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10)
const currentPage = ref(1)
const pageSize = ref(10)
const getData = () => {
  RequestWasteStatisticGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    storeId: searchData.value.storeId,
    companyNode: searchData.value.companyNode,
    wasteType: searchData.value.wasteType,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.created = formatTime(item.createdAt)
      item.updated = formatTime(item.updatedAt)
    })
    tableData.value = res.resultObj.data
    total.value = res.resultObj.total
  })
};
getData()
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getData()
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getData()
};
/* ************************ 详情 ************************ */
const maxStock = ref<any>(0)
const minStock = ref<any>(0)
const tableDataDetial = ref<any>([])
const idSta = ref<any>('')
const details = (row: any) => {
  console.log('adad', row)
  editformData.value = row
  drawer.value = true
  RequestInventoryWarnningGetWarningByStatisticId(2, row.id).then(
    (res: any) => {
      if (res.resultObj != null) {
        idSta.value = res.resultObj.id
        console.log('idSta.value', idSta.value)
        minStock.value = res.resultObj.minStock
        maxStock.value = res.resultObj.maxStock
      }
    }
  )
  RequestHazardousWasteGetWasteDetail(row.id).then((res: any) => {
    res.resultObj.forEach((item: any) => {
      item.createdAt = formatTime(item.createdAt)
      item.updatedAt = formatTime(item.updatedAt)
      item.adress = item.warehouseArea.area + ',' + item.warehouseArea.position
    })
    tableDataDetial.value = res.resultObj
  })
};
/* ************************ 修改详情 ************************ */
const editDetails = () => {
  flag.value = false
};
/* ************************ 保存详情 ************************ */
const saveDetails = () => {
  flag.value = true
  RequestInventoryWarnningSave({
    minStock: minStock.value,
    maxStock: maxStock.value,
    statisticId: editformData.value.id,
    id: idSta.value,
    contentType: 2,
  }).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      //其它处理代码
      idSta.value = ''
      getData()
    } else {
      ElMessage.error(res.msg)
    }
  })
};
/* ************************ 入库 ************************ */
const outData = ref<any>({
  // hazardousWasteType: '',//
  hazardousWasteName: '', // 危固废名称
  storageLocationRacks: '', // 危固废存储位置
  storeId: '', //
  wasteTypeName: '', // 危固废类型
  num: null, // 入库数量
  storageLocation: '', //
  measuringUnit: '', //
  remark: '', //
  status: '', // 入库方式
})
const options = ref<any>([])
const changeSearch = (event: any) => {
  RequestUpWarehouseAreaGetAreaInfo(event).then((res: any) => {
    res.resultObj.forEach((item: any) => {
      console.log(item)
      item.label = item.area
      item.value = item.area
      item.children = item.list
      item.list.forEach((val: any) => {
        val.label = val.position
        val.value = val.id
      })
    })
    options.value = res.resultObj
    console.log(res.resultObj)
  })
};
const changeArea = () => {
  if (outData.value.storeId == '') {
    ElMessage.error('请先选择仓库')
  }
}
// 危固废入库
const ruleFormRef_wgf_out = ref()
const rules_wgf_out = reactive({
  hazardousWasteName: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  storageLocation: [
    {
      required: true,
      message: '请选择存储位置',
      trigger: 'blur',
    },
  ],

  wasteTypeName: [
    { required: true, message: '请输入类型', trigger: 'blur' },
  ],
  num: [
    {
      required: true,
      message: '请输入数量',
      trigger: 'blur',
    },
    { type: 'number', message: '必须是数字' },
  ],
  status: [
    {
      required: true,
      message: '请选择入库方式',
      trigger: 'blur',
    },
  ],
  storeId: [
    {
      required: true,
      message: '请选择入库仓库',
      trigger: 'blur',
    },
  ],
})
const closeInDialogVisible = () => {
  outData.value.status = ""
  outData.value.wasteTypeName = ""
  outData.value.hazardousWasteName = ""
  outData.value.storeId = ""
  outData.value.storageLocation = ""
  outData.value.num = ""
}
const AddPutIn = async (formEl: any) => {
  console.log('formEl', formEl)
  loading.value = true
  if (!formEl) return
  // console.log(outData.value)
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      console.log('submit!')
      RequestHazardousWasteSave({
        wasteTypeName: outData.value.wasteTypeName,
        hazardousWasteName: outData.value.hazardousWasteName,
        storeId: outData.value.storeId,
        num: outData.value.num,
        measuringUnit: outData.value.measuringUnit,
        storageLocation: outData.value.storageLocation[1],
        remark: outData.value.remark,
        status: outData.value.status,
      }).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.msg)
          setTimeout(() => {
            loading.value = false
          }, 200)
          InDialogVisible.value = false
          //其它处理代码
          GetHazardousWasteGetWasteType()
          getData()
        } else {
          ElMessage.error(res.msg)
        }
      })
    } else {
      console.log('error submit!', fields)
      loading.value = false

    }
  })
};
/* ************************ 出库 ************************ */
/* 转运联单图片 */
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const fileRaw = ref<any>([])

const handleRemove = (file: UploadFile) => {
  console.log(file)
  fileRaw.value = []
};
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
};
const handleDownload = (file: UploadFile) => {
  console.log(file)
};
const changeFile = (file: UploadFile) => {
  fileRaw.value[0] = file.raw
  console.log(fileRaw.value)
};

const putInData = ref<any>({
  status: '',
  warehouseId: '',
  productType: '',
  num: '',
  measuringUnit: '',
  remark: '',
})
const Outbound = () => {
  console.log(fileRaw.value)
  const bold = new Blob(
    [
      JSON.stringify({
        status: putInData.value.status,
        warehouseId: putInData.value.warehouseId,
        productType: putInData.value.productType,
        num: putInData.value.num,
        measuringUnit: putInData.value.measuringUnit,
        remark: putInData.value.remark,
      }),
    ],
    {
      type: 'application/json;charset=UTF-8',
    }
  )
  let imgFlie = new FormData()
  imgFlie.append('outbound', bold)
  imgFlie.append('img', fileRaw.value)
  RequestHazardousWasteWasteOutbound(imgFlie).then((res: any) => {
    if (res.success == true) {
      ElMessage.success(res.msg)
      StartcenterDialogVisible.value = false
      fileRaw.value = []

      //其它处理代码
      getData()
    } else {
      ElMessage.error(res.msg)
    }
  })
};
/* ************************ 出库 ************************ */
const outBoundDialogVisible = ref<any>(false)
const ruleFormRef_wgf_outBound = ref()
const rules_wgf_outBound = reactive({
  num: [
    {
      required: true,
      message: '请输入数量',
      trigger: 'blur',
    },
    { type: 'number', message: '必须是数字' },
  ],
})

const outBoundData = ref<any>({
  num: 0
})
const outBoundDialog = (e: any) => {
  console.log(e)
  outBoundData.value = e
  outBoundData.value.warehouseId = e.storeId
  outBoundData.value.productType = e.wasteType
  outBoundData.value.num = null
  outBoundData.value.status = 0
  outBoundDialogVisible.value = true
};
const closeOutBoundDialogVisible = () => {
  fileRaw.value = []
}
const outBoundBtn = async (formEl: any) => {
  await formEl.validate((valid: any) => {
    if (valid) {
      if (fileRaw.value.length != 0) {
        loading.value = true
        delete outBoundData.value.createdAt
        delete outBoundData.value.updatedAt
        const bold = new Blob([JSON.stringify(outBoundData.value)], {
          type: 'application/json;charset=UTF-8',
        })
        let imgFlie = new FormData()
        imgFlie.append('outbound', bold)
        imgFlie.append('img', fileRaw.value[0].raw)
        RequestHazardousWasteWasteOutbound(imgFlie).then((res: any) => {
          if (res.success == true) {
            ElMessage.success(res.msg)
            setTimeout(() => {
              loading.value = false
            }, 100)
            outBoundDialogVisible.value = false
            fileRaw.value = []
            getData()
          } else {
            ElMessage.error(res.msg)
            loading.value = false
          }
        })
      } else {
        ElMessage.error('请上传转运联单')
      }
    }

  })

}

/* ************************ 调拨 ************************ */
const transferData = ref<any>({
  num: '',
  // transferStatus: 0,
  inWarehouseId: '',
  transferInArea: '',
  outWarehouseId: '',
  productType: '',
  contentType: 2,
})
const optionsTransfer = ref<any>([])
const changeTransfer = (event: any) => {
  RequestUpWarehouseAreaGetAreaInfo(event).then((res: any) => {
    res.resultObj.forEach((item: any) => {
      console.log(item)
      item.label = item.area
      item.value = item.area
      item.children = item.list
      item.list.forEach((val: any) => {
        val.label = val.position
        val.value = val.id
      })
    })
    optionsTransfer.value = res.resultObj
  })
};
const changeAreaFocus = () => {
  if (transferData.value.inWarehouseId == '') {
    ElMessage.error('请先选择入库仓库')
  }
}
const transfer = () => {
  console.log('transferData.value', transferData.value)
  const bold = new Blob(
    [
      JSON.stringify({
        num: transferData.value.num,
        inWarehouseId: transferData.value.inWarehouseId,
        outWarehouseId: transferData.value.outWarehouseId,
        productType: transferData.value.productType,
        contentType: 2,
        transferInArea: transferData.value.transferInArea[1],
      }),
    ],
    {
      type: 'application/json;charset=UTF-8',
    }
  )
  let imgFlie = new FormData()
  imgFlie.append('transfer', bold)
  imgFlie.append('img', fileRaw.value)
  RequestTransferSave(imgFlie).then((res: any) => {
    console.log(res)
    if (res.success == true) {
      ElMessage.success(res.msg)
      DiaoBoDialogVisible.value = false
      //其它处理代码
      fileRaw.value = []
      getData()
    } else {
      ElMessage.error(res.msg)
    }
  })
};
/* ************************ 调拨 ************************ */
const TransferDialogVisible = ref<any>(false)
const transferDialogData = ref<any>({})
const transferDialog = (e: any) => {
  console.log(e)
  TransferDialogVisible.value = true
  transferDialogData.value = e
  transferDialogData.value.num = null
  transferDialogData.value.outWarehouseId = e.storeId
  transferDialogData.value.productType = e.wasteType
  transferDialogData.value.contentType = 2
  transferDialogData.value.transferInArea = null
  transferDialogData.value.inWarehouseId = null
};
const changeTransfer1 = (event: any) => {
  RequestUpWarehouseAreaGetAreaInfo(event).then((res: any) => {
    res.resultObj.forEach((item: any) => {
      console.log(item)
      item.label = item.area
      item.value = item.area
      item.children = item.list
      item.list.forEach((val: any) => {
        val.label = val.position
        val.value = val.id
      })
    })
    optionsTransfer.value = res.resultObj
  })
};
const changeAreaFocus1 = () => {
  if (transferDialogData.value.inWarehouseId == null) {
    ElMessage.error('请先选择入库仓库')
  } else {
    transferDialogData.value.transferInArea =
      transferDialogData.value.transferInArea[1]
  }
}
const ruleFormRef_transferDialog = ref()
const rules_transferDialog = reactive({
  num: [
    {
      required: true,
      message: '请输入数量',
      trigger: 'blur',
    },
    {
      type: 'number',
      message: '必须是数字',
    },
  ],
  transferInArea: [
    {
      required: true,
      message: '请输入存储位置',
      trigger: 'change',
    }
  ],
  inWarehouseId: [
    {
      required: true,
      message: '请输入调入仓库',
      trigger: 'change',
    }
  ]
})
const transferDialogBtn = async (formEl) => {
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      delete transferDialogData.value.createdAt
      delete transferDialogData.value.updatedAt
      console.log(transferDialogData.value)
      const bold = new Blob([JSON.stringify(transferDialogData.value)], {
        type: 'application/json;charset=UTF-8',
      })
      let imgFlie = new FormData()
      imgFlie.append('transfer', bold)
      imgFlie.append('img', fileRaw.value)
      RequestTransferSave(imgFlie).then((res: any) => {
        console.log(res)
        if (res.success == true) {
          ElMessage.success(res.msg)
          setTimeout(() => {
            loading.value = false
          }, 200)
          TransferDialogVisible.value = false
          fileRaw.value = []
          getData()
        } else {
          loading.value = false
          ElMessage.error(res.msg)
        }
      })
    }
  })
};
const drawerClose = () => {
  setTimeout(() => {
    maxStock.value = 0
    minStock.value = 0
  }, 300)
};
const exportExcel = () => {
  let nowDate = formatTimeHan(new Date())
  RequestWasteStatisticOutputExcel({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出')
    } else {
      exportFile(res, `${nowDate}所有危固废数据报表`)
    }
  })
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  // .el-icon svg {
  //     color: #fff;
  // }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

::v-deep .b0 {
  .el-input__wrapper:nth-child(1) {
    border-radius: 0.25rem 0rem 0rem 0.25rem;
    position: relative;
    left: 0.0625rem;
  }

  .el-input__wrapper:nth-child(2) {
    border-radius: 0rem 0.25rem 0.25rem 0rem;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: 0.375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: 0.0625rem dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: 0.0625rem dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}

::v-deep .el-upload {
  opacity: 0;
}
</style>
